<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <template th:replace="common/header"></template>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Ssly</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="down-task">下载任务管理 <span class="sr-only">(current)</span></a></li>
                <li class="active"><a href="source-media">源媒体管理</a></li>
                <li><a href="convert-task">转码任务管理</a></li>
                <li><a href="target-media">转码媒体管理</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="admin" href="#"></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"><i class="glyphicon glyphicon-plus"></i> 新建 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" onclick="createDownTask()"><i class="glyphicon glyphicon-download-alt"></i> 下载任务</a>
                        </li>
                        <li><a href="#" onclick="createConvertTask()"><i class="glyphicon glyphicon-retweet"></i>
                            转码任务</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<main class="container-fluid">
    <table id="myTable" class="table table-hover table-bordered table-condensed text-center">
        <thead>
        <tr>
            <td width="40">ID</td>
            <td>媒体名称</td>
            <td>宽度</td>
            <td>高度</td>
            <td>音频编码</td>
            <td>视频编码</td>
            <td>时长</td>
            <td>比特率</td>
            <td>创建时间</td>
            <td width="80">操作</td>
        </tr>
        </thead>

    </table>

    <div class="auto-refresh">
        <label>
            <input type="checkbox" id="autoRefresh"> 自动刷新列表
        </label>
    </div>

</main>
<template th:replace="common/footer"></template>

<script>
    $(document).ready(function () {
        dataTable = $('#myTable').DataTable({
            serverSide: true,
            order: [0, "desc"],
            stateSave: true,
            ajax: {
                url: 'api/source-media'
            },
            columns: [
                {
                    data: 'id'
                }, {
                    data: 'name'
                }, {
                    data: 'width'
                }, {
                    data: 'height'
                }, {
                    data: 'acodec'
                }, {
                    data: 'vcodec'
                }, {
                    data: 'duration'
                }, {
                    data: 'bitrate',
                    render: function (data, type, row, meta) {
                        return data + ' kb/s'
                    }
                }, {
                    data: 'createTime'
                }, {
                    data: 'id',
                    render: function (data, type, row, meta) {
                        return '<button class="btn btn-primary btn-xs" onclick="convert(' + data + ')">转码</button> '
                            + '<button class="btn btn-danger btn-xs" onclick="del(' + data + ')">删除</button>'
                    }
                }

            ]
        });
    });


</script>
</body>
</html>
